<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="utf-8">
    <title>Spring Security Login Test</title>
    <style>
			p {
				padding: 10px 0;
			}

			span {
				display: inline-block;
				float: left;
				width: 20%;
				padding-left: 5px;
			}

			input {
				display: inline-block;
				float: left;
				width: 75%;
			}

			button {
				width: 100px;
			}
		</style>
</head>
<body>
<h3 style="padding-top: 60px;">Spring Security Login Test</h3>
<form name="login" action="javascript:void(0);" method="post">
    <p>
        <span>用户名：</span>
        <input type="text" name="username" placeholder="Please enter your jwtUser name" value="" required="required"/>
    </p>
    <p>
        <span>密码：</span>
        <input type="password" name="password" placeholder="Please enter your password" value="" required="required"/>
    </p>
    <p>
        <button type="submit">登录</button>
    </p>
</form>

<script src="https://libs.cdnjs.net/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
			$(function(){
				$('[name="login"]').submit(function(){
					console.log($(this).serialize())
					$.post(
						'/api/login',
						$(this).serialize(),
						function(data){
							if (data == 'success') {
								location.href = '/home'
 							} else {
								alert("您输入的用户名或密码错误")
							}
						}
					)
				});
			})
		</script>
</body>
</html>
